<template>
 <div class="pc" v-if="store.state.isPc">
  <div class="header">{{ servetitle }}</div>
  <div class="noticedetails">
    <div class="container">
      <div class="breadcrumb">
        <el-breadcrumb separator="》">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item
            :to="{
              path: '/download',
              query: {
                class_id: $route.query.class_id,
                name: $route.query.name,
              },
            }"
            >{{ $route.query.name }}</el-breadcrumb-item
          >
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="title"><p>{{ details.value?.name }}</p></div>
      <div class="info">
        <span>
          发布时间：{{ timestampToTime(details.value?.create_time) }}</span
        >
        <span
          >来源：<span class="sgreen">{{ details.value?.source }}</span></span
        >
      </div>
      <div class="content" v-html="details.value?.content"></div>
      <!-- <div class="cooperation" @click="godialog">
        我<br />
        要<br />
        合<br />
        作
      </div> -->
    </div>
  </div>

  <div class="foot">
    <div class="top">
      <p>指导单位：文化和旅游部科技教育司</p>
      <p>主办单位：全国文化艺术职业教育教学指导委员会、深圳市文化广电旅游体育局</p>
      <p>
        承办单位：全国文化艺术职业教育教学指导委员会对外交流与合作专委会、教学质量评价与保障专委会、深圳艺术学校、浙江艺术学校
      </p>
      <p>技术支持单位：广州市晨旭教育评估有限公司</p>
    </div>
    <div class="bottom">
      <p>ICP备05052393号-11</p>
    </div>
    <el-dialog
      v-model="dialogVisible"
      width="435px"
      :show-close="false"
      :before-close="godialog"
      custom-class="eldia"
    >
      <div class="title">我要合作</div>

      <el-input v-model="obj.phone" placeholder="请输入联系方式" />
      <el-input v-model="obj.username" placeholder="请输入用户名称" />
      <el-input v-model="obj.school" placeholder="请输入学校名称" />
      <el-input
        v-model="obj.need"
        placeholder="请输入您的需求"
        show-word-limit
        type="textarea"
        rows="4"
      />
      <el-button type="primary" @click="sumbit">提交</el-button>
    </el-dialog>
  </div>
 </div>
 <div class="mob" v-else>
  <div class="header">{{ servetitle }}</div>
  <div class="noticedetails">
    <div class="container">
      <div class="breadcrumb">
        <el-breadcrumb separator="》">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item
            :to="{
              path: '/download',
              query: {
                class_id: $route.query.class_id,
                name: $route.query.name,
              },
            }"
            >{{ $route.query.name }}</el-breadcrumb-item
          >
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="title"><p>{{ details.value?.name }}</p></div>
      <div class="info">
        <span>
          发布时间：{{ timestampToTime(details.value?.create_time) }}</span
        >
        <br>
        <span
          >来源：<span class="sgreen">{{ details.value?.source }}</span></span
        >
      </div>
      <div class="content" v-html="details.value?.content"></div>
      <!-- <div class="cooperation" @click="godialog">
        我<br />
        要<br />
        合<br />
        作
      </div> -->
    </div>
  </div>

  <div class="foot">
      <p>指导单位：文化和旅游部科技教育司</p>
      <p>主办单位：全国文化艺术职业教育教学指导委员会、深圳市文化广电旅游体育局</p>
      <p>
        承办单位：全国文化艺术职业教育教学指导委员会对外交流与合作专委会、教学质量评价与保障专委会、深圳艺术学校、浙江艺术学校
      </p>
      <p>技术支持单位：广州市晨旭教育评估有限公司</p>
   
      <p>ICP备05052393号-11</p>


   
  </div>
 </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, watch, ref, onMounted } from "vue";
import { newsDetails ,cooperate,serveTitile} from "../../../api/api";
import { useRoute,useRouter } from "vue-router";
import { ElMessage, messageConfig } from "element-plus";
import { timestampToTime } from "../../../utils/utils";
import {useStore} from 'vuex'
let $route = useRoute();
let $router = useRouter();
let store = useStore()
onMounted(() => {
  getdetails();

});

let servetitle = ref('')
const gettitle = ()=>{
  serveTitile().then(res=>{
    servetitle.value =  res.data.title
  })
}
gettitle()
let dialogVisible = ref(false);
const godialog = () => {
  dialogVisible.value = !dialogVisible.value;
};

let obj = reactive({
  phone: "",
  username: "",
  school: "",
  need: "",
});

let details = reactive({ value: {} });
const getdetails = () => {
  newsDetails({ news_id: $route.query.id }).then((res) => {
    details.value = res.data[0];
    details.value.content = details.value.content.replace(/&nbsp;/ig, '&ensp;');
  });
};


const sumbit = ()=>{
  if(obj.phone==''){
    ElMessage.warning('请填写手机号')
    return
  }
  if(obj.username==''){
    ElMessage.warning('请填写用户名称')
    return
  }
  if(obj.school==''){
    ElMessage.warning('请填写学校名称')
    return
  }
  if(obj.need==''){
    ElMessage.warning('请填写需求')
    return
  }

  cooperate({mobile_number:obj.phone,name:obj.username,school_name:obj.school,demand:obj.need,class_id:$route.query.id}).then(res=>{
    $router.go(0)
  })


}
</script>

<style lang="scss" scoped>
.pc{
  .header {
  width: 100%;
  height: 80px;
  background: linear-gradient(56deg, #23179d 6%, #4448ae 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  text-align: center;
  line-height: 80px;
  font-size: 22px;
  font-family: Alibaba PuHuiTi 2-75 SemiBold, Alibaba PuHuiTi 20;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.noticedetails {
  background: #f7f9ff;
  min-height: 900px;
  .container {
    padding-top: 100px;
    background: white;
    border-radius: 5px;
    margin: 0 auto;
    padding: 20px;

    .here-table {
      margin: 0 auto;
      border: 1px solid rgba(211, 117, 44, 0.42);
      border-radius: 2px;
      background: rgba(255, 77, 81, 0.04);
      padding: 0 20px;
      tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
        td {
          text-align: left;
          &:nth-child(2n-1) {
            width: 90px;
            font-weight: 700;
            color: red;
            text-align: justify;
            word-spacing: 10px;
            line-height: 40px;
          }
          &:nth-child(2n) {
            width: 376px;
          }
        }
      }
    }
    :deep(.el-breadcrumb) {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #dadada;
      .el-breadcrumb__item {
        &:nth-child(1) {
          .is-link {
            color: #5463ff !important;
            font-size: 16px;
            font-family: Source Han Sans-Regular, Source Han Sans;
            font-weight: 400;
          }
        }
        &:nth-child(2) {
          .is-link {
            color: #5463ff !important;
            font-size: 16px;
            font-family: Source Han Sans-Regular, Source Han Sans;
            font-weight: 400;
          }
        }
      }
    }
    .title {
      height: 130px;
      
      text-align: center;
      font-size: 30px;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #000000;
      position: relative;
    p{
      position: absolute;
      left: 0; 
      top: 50%;
      width:100%;
      text-align:center;
      transform: translateY(-50%);
      display: block;
    }
    }
    .info {
      color: #999;
      font-size: 15px;
      margin: 0 auto;
      margin-top: 15px;
      text-align: center;
      background: #f1f3f9;
      width: 928px;
      height: 44px;
      span {
        margin: 0 15px;
        font-size: 16px;
        line-height: 44px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #666666;
      }
    }
    .content {
      margin: 0 auto;
      margin-top: 50px;
      text-align: left;
      margin-bottom: 80px;
      // min-height: 300px;
      min-height: 600px;
      width: 928px;
    }
  }
}
.foot {
  width: 100%;
  height: 270px;
  background: url("../../../assets/footbg.png") no-repeat;
  background-size: 100% 100%;
  .top {
    height: 220px;
    width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 40px;
    p {
      font-size: 18px;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
      line-height: 36px;
    }
  }
  .bottom {
    height: 48px;
    border-top: 1px solid #dadada;
    p {
      line-height: 48px;
      text-align: center;
      font-size: 18px;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
.cooperation {
  background: url("../../../assets/cooperationbg.png");
  width: 80px;
  height: 180px;
  text-align: center;
  color: white;
  text-align: center;
  line-height: 30px;
  padding-top: 25px;
  padding-left: 14px;
  cursor: pointer;
  position: fixed;
  right: 15px;
  top: 60%;
  border-radius: 40px;
  overflow: hidden;
  font-size: 22px;
  font-family: Source Han Sans-Regular, Source Han Sans;
  font-weight: 700;
}
}

.mob{
  
  .header {
  width: 100%;
  height: 5rem;
  background: linear-gradient(56deg, #23179d 6%, #4448ae 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  text-align: center;
  line-height: 5rem;
  font-size: 1.875rem;
  font-family: Alibaba PuHuiTi 2-75 SemiBold, Alibaba PuHuiTi 20;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.noticedetails {
  background: #f7f9ff;
  min-height: 56.25rem;
  .container {
    width: 46.875rem;
    padding-top: 6.25rem;
    background: white;
    border-radius: 5px;
    margin: 0 auto;
    padding: 1.25rem;
   

   
    :deep(.el-breadcrumb) {
      height: 4.125rem;
      line-height: 4.125rem;
      border-bottom: 1px solid #dadada;
      margin-bottom: 1.875rem;
      .el-breadcrumb__item {
        &:nth-child(1) {
          .is-link {
            color: #5463ff !important;
            font-size: 1rem;
            font-family: Source Han Sans-Regular, Source Han Sans;
            font-weight: 400;
            font-size: 16px;
          }
        }
        &:nth-child(2) {
          .is-link {
            color: #5463ff !important;
            font-size: 1rem;
            font-family: Source Han Sans-Regular, Source Han Sans;
            font-weight: 400;
            font-size: 16px;
          }
        }
      }
    }
    .title {
      min-height: 14.125rem;
     
      text-align: center;
      font-size: 2.5rem;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #000000;
      position: relative;
    p{
      position: absolute;
      left: 0; 
      top: 50%;
      width:100%;
      text-align:center;
      transform: translateY(-50%);
      display: block;
    }
    }
    .info {
      margin-top: 3.125rem;
      color: #999;
      font-size: 1.25rem;
      margin: 0 auto;
      margin-top: .9375rem;
      text-align: center;
      height: 8rem;
      border-bottom: 2px solid #ccc;
      span {
        margin: 0 .9375rem;
        font-size: 2rem;
        line-height: 4rem;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #666666;
        
      }
    }
    .content {
      margin: 0 auto;
      padding-top: 3.125rem;
      text-align: left;
      margin-bottom: 5rem;
      // min-height: 300px;
      min-height: 37.5rem;
      font-size: 2.2rem;
      :deep(img){
        width: 100% !important;
      }
      :deep(p){
        margin-bottom:2.2rem;
        line-height: 2.2rem;
      }
    }
  }
}
.foot{
    background: #3c3daa;
    width: 46.875rem;
    height: 15.625rem;
    color: rgb(245, 245, 245);
    font-size: 1.125rem;
    padding: 0 1.5rem;
    padding-top: 2.1875rem;
    line-height: 1.875rem;
  }

}
</style>
